import React, {Component, Fragment} from 'react';
import logo from '../logo.svg';
import {Layout, Breadcrumb, Row, Col} from 'antd';
import Moment from 'moment'
import Header from '../components/header'
import Footer from '../components/footer'
import ListCom from '../components/list'
import FormMsg from '../components/fromMsg'

const {Content} = Layout;

class MessagePage extends Component {
  constructor(props){
    super(props)
    this.state={
      list:[
        {
          id:0,
          avatar:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
          title:"BOBO大人",
          description:"留言板测试一下哈，小步快跑 快速迭代，持续更新bolog新功能",
          creat_at:Moment().startOf('hour').fromNow()
        },
        {
          id:1,
          avatar:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
          title:"飞天小男警",
          description:"修复bug，练练react的手，又来留言咯",
          creat_at:Moment().startOf('hour').fromNow()
        }
      ],
    }
    this.submitData = this.submitData.bind(this)
  }

  submitData(target){
    let index = this.state.list.length
    let obj ={
      id:index,
      avatar:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
      title:target.Author,
      description:target.Message,
      creat_at:Moment().startOf('hour').fromNow()
    }
    this.setState({
      list:[...this.state.list, obj],
    })
  }
 
  render(){
    return (
      <Fragment>
        <Layout className="layout">
          <Header logo={logo} initKey={'6'} username={this.props.name} />
          <Content className="cts">
            <Row type={'flex'} justify={'center'} >
              <Col xs={{span:24}} md={{span:16}} >
                <Breadcrumb style={{ margin: '16px 0' }}>
                  <Breadcrumb.Item>首页</Breadcrumb.Item>
                  <Breadcrumb.Item>应用</Breadcrumb.Item>
                  <Breadcrumb.Item>留言板</Breadcrumb.Item>
                </Breadcrumb>
                <div style={{ background: '#fff', padding: 24, minHeight: 480 }}>
                  <Row>
                    <FormMsg receiveData={this.submitData}  />
                  </Row>
                  <Row>
                    <ListCom data={this.state.list} />
                  </Row>
                </div>
              </Col>
            </Row>
          </Content>
          <Footer logo={logo} />  
        </Layout>
      </Fragment>
    );
  }
  
}

export default MessagePage;
